<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="/static/css/mobile/common.css">
    <link rel="stylesheet" href="/static/css/mobile/leaderboard.css">
    <title>排行榜 - 智慧答题系统</title>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="mobile-header">
        <div class="header-left">
            <span class="header-title">排行榜</span>
        </div>
        <div class="header-right">
            <button class="btn-icon" onclick="location.reload()">🔄</button>
        </div>
    </div>

    <div class="page-wrapper">
        <!-- 顶部横幅 -->
        <div class="top-banner">
            <div class="banner-icon">🏆</div>
            <h2 class="banner-title">高手榜</h2>
            <p class="banner-subtitle">全站答题高手排行</p>
        </div>

        <div class="container">
            <!-- 筛选标签 -->
            <div class="filter-tabs">
                <button class="filter-tab active" data-type="total">总分榜</button>
                <button class="filter-tab" data-type="accuracy">正确率榜</button>
                <button class="filter-tab" data-type="count">答题数榜</button>
            </div>

            <!-- 前三名 -->
            <div class="top-three" id="topThree">
                <div class="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>

            <!-- 排行榜列表 -->
            <div class="leaderboard-list" id="leaderboardList">
                <!-- 列表将动态加载 -->
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="mobile-nav">
        <a href="/" class="nav-item active">
            <div class="nav-icon"><img src="static/img/homePage.png" alt="ICO" style=" width:28px;height:auto;"></div>
            <div class="nav-label">首页</div>
        </a>
        <a href="/quiz" class="nav-item">
            <div class="nav-icon"><img src="static/img/test.png" alt="ICO" style=" width:30px;height:auto;"></div>
            <div class="nav-label">答题</div>
        </a>
        <a href="/leaderboard" class="nav-item">
            <div class="nav-icon"><img src="static/img/leaderboard_b.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">排行榜</div>
        </a>
        <a href="/profile" class="nav-item">
            <div class="nav-icon"><img src="static/img/me.png" alt="ICO" style=" width:26px;height:auto;"></div>
            <div class="nav-label">我的</div>
        </a>
    </nav>

    <script src="/static/js/mobile/leaderboard.js"></script>
</body>
</html>
